<template>
  <div id="app" class="screen relative filter" :class="{ 'dark': darkMode, 'night-light': nightLight }">

    <Desktop />    
    <div class="bootloader absolute left-0 top-0 w-full h-full bg-black flex flex-col justify-center items-center w-full h-full overflow-hidden z-50" v-if="isLoading">
      <img src="./assets/boot-logo.png" class="w-32 mb-48"/>

      <Loader/>

    </div>

  </div>
</template>

<script setup>

  import Desktop from "./view/Desktop.vue"
  import Loader from "./view/Loader.vue";
  import { computed, onMounted, reactive, ref, toRefs } from "@vue/runtime-core";
  import {useStore} from "vuex"
  

  const store = useStore()
  
  const isLoading = computed(() => {
    return store.state.isLoading
  })

  const darkMode = computed(() => store.state.darkMode)
  const nightLight = computed(() => store.state.nightLight)
  onMounted(() => {
    window.addEventListener('load', () => {
      setTimeout(() => {
        store.commit("CHANGE_BOOTSCREEN")
        console.log(store.state.isLoading)
      }, 0)
    })
  })
    

</script>

<style>


html, body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

* {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.screen::after {
  content: '';
  background: rgba(255, 0, 0, 0.15);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  pointer-events: none;
  transition: 2s;
}


.screen.night-light::after {
  opacity: 1;
}

.bootloader {
  cursor: none;
}

#app {
  height: 100%;
}

</style>
